<template>
    <div class="flex_col_start bk2 h100">
        <div class="flex_row_center mt5 w100" style="justify-content: center;">
            <label class="f2">在线人数:</label>
            <label class="ml5 f2">{{ ctx.inline }}</label>
        </div>
        <div class="flex_row_center mt5 w100" style="justify-content: center;">
            <label class="f2">点赞人数:</label>
            <label class="ml5 f2">{{ ctx.room }}</label>
        </div>
        <div class="flex_row_center mt5 w100" style="justify-content: center;">
            <label class="f2">得分:</label>
            <label class="ml5 f2">{{ Math.floor(ctx.room * 100 / ctx.inline) }}</label>
        </div>
        <el-button @click="onClickVote" style="margin-top: 20%;" class="flex_center_self" type="primary">投票</el-button>
    </div>
</template>

<script lang="ts" setup>
import { get_vote_count, updateFlag, vote, VOTE_ONLINE, VOTE_ROOM } from '@/service/api';
import { run } from '@/utils/ui';
import { reactive, watch } from 'vue';

interface Ctx {
    inline: number,
    room: number,
}

const ctx = reactive<Ctx>({
    inline: 0,
    room: 0,
});

async function init() {
    await run(async () => {
        const inline = await get_vote_count(VOTE_ONLINE);
        const room = await get_vote_count(VOTE_ROOM);
        ctx.room = room;
        ctx.inline = inline;
    });
}

async function onClickVote() {
    await run(async () => {
        await vote(VOTE_ROOM);
    });
    await init();
}

init();

watch(updateFlag, () => {
    init();
})

</script>
